  <template>
    <el-container>
      <vHeadSpace />
      <el-container>
        <vAsideSpace />
        <el-container>
          <el-main class="itemInfo_main">
            <div class="content">
              <!--  监控项信息页头部栏  -->
              <div class="itemInfo-header">
                <p>设备监控项</p>
                <el-button v-if="deleteButtonView" @click="showItemTable " type="primary" size="small" style="margin-top:36px">创建监控项</el-button>
              </div>
              <!--  监控项信息中部栏  -->
              <div class="itemInfo-middle">
                <router-link :to="{name:'HostSetting'}">
                  <span class="itemInfo-middle-host">返回所有设备</span>&nbsp;/&nbsp;
                </router-link>
                <!--   主机名称   -->
                <span style="text-decoration: none;color: #00a4ff;">当前设备: &nbsp;
                  <!--        选择设备-->
        <template>
          <el-select v-model="hostid" :disabled="!showItemTableBool" @change="handleSelectHost(hostid)" filterable placeholder="选择或输入关键字">
            <el-option
                    v-for="item in hostInfos"
                    :key="item.hostid"
                    :label="item.host"
                    :value="item.hostid">
            </el-option>
          </el-select>
        </template>
      </span>
                <span style="margin-left: 30px">设备状态: </span><span :class="ifStart" v-text="statusValue" ></span>
                <div class="itemInfo-middle-type">
                  <span>设备类型: </span>
                  <div :class="ifAvailable('1')" >服务器</div>
                  <div :class="ifAvailable('2')" >交换机</div>
                  <div :class="ifAvailable('3')" >防火墙</div>
                  <div :class="ifAvailable('4')" class="itemInfo-middle-type-last">单向网闸</div>
                </div>
                <!--      <span>监控项 29</span>-->
              </div>
              <hr style="margin-top: 45px"/>
              <!--  监控项信息内容  -->
              <div v-if="showItemTableBool" class="itemInfo-content-table" >
                <el-table
                        :row-key='row => row.itemid'
                        ref="table"
                        :data="currentPageItems"
                        tooltip-effect="dark"
                        :height="screenHeight"
                        :width="screenWidth"
                        @selection-change="handleSelectionChange">
                  <el-table-column type="selection" :width="0.043*screenWidth" :reserve-selection="true"></el-table-column>
                  <el-table-column
                          prop="name"
                          label="名称">
                  </el-table-column>
                  <!--<el-table-column
                      prop="key_"
                      label="键值"
                      width="350">
                  </el-table-column>-->
                  <el-table-column
                          prop="delay"
                          label="间隔"
                          :width="0.118*screenWidth">
                  </el-table-column>
                  <el-table-column
                          prop="history"
                          label="历史记录"
                          :width="0.134*screenWidth">
                  </el-table-column>
                  <el-table-column
                          prop="trends"
                          label="趋势"
                          :width="0.118*screenWidth">
                  </el-table-column>
                  <el-table-column
                          prop="type"
                          label="类型"
                          :width="0.134*screenWidth">
                  </el-table-column>
                  <el-table-column
                          label="状态"
                          :filters="[{value: '已启用', text: '已启用'},{value: '未启用', text: '未启用'}]"
                          :filter-method="filterHandler"
                          :width="0.134*screenWidth"
                          show-overflow-tooltip>
                    <template slot-scope="scope">
                      <el-tooltip content="点击切换状态" placement="top-start">
                        <el-tag
                                :type="scope.row.status === '已启用' ? 'success' : 'danger' "
                                style="cursor: pointer"
                                size="small"
                                @click="scope.row.status === '已启用' ? disableItem(scope.row.itemid,scope.row.name) : enableItem(scope.row.itemid,scope.row.name)"
                        >{{scope.row.status}}</el-tag>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                        :current-page="currentPage"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="total"
                        @current-change="handleCurrentChange"
                />
              </div>
              <div v-if="!showItemTableBool" class="itemInfo-content-form" align="left">
                <!--   在这里加添加监控项的表单标签   -->
                <el-form ref="triggerForm" :rules="rules" :model="triggerForm" label-width="130px" style="width: 800px;margin-left: 50px" >
                  <el-form-item label="名称" prop="name">
                    <el-input v-model="triggerForm.name" ></el-input>
                  </el-form-item>
                  <el-form-item label="设备类型" >
                    <el-select v-model="type" disabled style="float: left"></el-select>
                  </el-form-item>

                  <el-form-item label="键值" prop="key_">
                    <el-input type="textarea" id="triggerKey"  autosize  v-model="triggerForm.key_" style="width:560px;float: left"
                              clearable placeholder="键值为必填项"></el-input>
                    <el-popover
                            placement="bottom"
                            title="帮助"
                            trigger="click"
                            width="480"
                            v-if="triggerForm.key_.length > 0">
                      <template>
                        <el-radio v-model="radio" label="1">参数描述</el-radio>
                        <el-radio v-model="radio" label="2">填写样例</el-radio>
                      </template>
                      <template v-if="radio === '1'">
                        <p>注意: 没有尖括号的参数是强制性的。标有尖括号 &lt; &gt; 的参数是可选的。</p>
                        <el-form inline>
                          <p v-for="(val,key) in params" :key="key">
                            <span style="font-family: '华文楷体',sans-serif; font-size: 22px; color: rgb(64,158,255);">{{key}}</span>:
                            <span>{{ val }}</span>
                          </p>
                        </el-form>
                      </template>
                      <template v-if="radio === '2'">
                        <ul>
                          <li v-for="exp in examples" :key="exp">{{exp}}</li>
                        </ul>
                        <p>仅供参考，参数具体填写按照实际需求为准!</p>
                      </template>
                      <el-button slot="reference" type="small" icon="el-icon-question" style="float: left"></el-button>
                    </el-popover>
                    <el-button @click="selectKey" type="small" style="float: left">选择</el-button>
                  </el-form-item>
                  <el-form-item label="主机接口" >
                    <el-input v-model="interface_" disabled></el-input>
                  </el-form-item>
                  <el-form-item v-if="snmpShowBool" label="SNMP OID" prop="snmp_oid">
                    <el-input v-model="triggerForm.snmp_oid" ></el-input>
                  </el-form-item>
                  <el-form-item label="信息类型" prop="value_type">
                    <el-select v-model="triggerForm.value_type" style="float: left">
                      <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                      </el-option>
                      <!--            <el-option label="数字（无正负）" :value="0"></el-option>-->
                      <!--            <el-option label="浮点数" :value="1"></el-option>-->
                      <!--            <el-option label="字符" :value="2"></el-option>-->
                      <!--            <el-option label="日志" :value="3"></el-option>-->
                      <!--            <el-option label="文本" :value="4"></el-option>-->
                    </el-select>
                  </el-form-item>
                  <el-form-item label="更新时间" prop="delay">
                    <el-input v-model="triggerForm.delay" style="width:100px;float: left" ></el-input>
                    <el-radio-group v-model="delayUnit" >
                      <el-radio-button label="s" >秒</el-radio-button>
                      <el-radio-button label="m" >分</el-radio-button>
                      <el-radio-button label="h" >时</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="历史数据保留时长" style="font-size: small;" >
                    <el-radio-group v-model="radioHistory" @change="isShowHistory" style="float:left;font-size: small;">
                      <el-radio-button label="不保留历史数据" size="mini" ></el-radio-button>
                      <el-radio-button label="保留历史时长" size="mini" ></el-radio-button>
                    </el-radio-group>
                    <template v-if="boolHistory">
                      <el-input  v-model="triggerForm.history" style="width: 100px;float:left;margin-left: 2px"></el-input>
                    </template>
                  </el-form-item>
                  <el-form-item label="趋势存储时间" >
                    <el-radio-group v-model="radioTrend" @change="isShowTrend" style="float:left;font-size: small;">
                      <el-radio-button label="不保留趋势存储" size="mini" style="font-size: 15px"></el-radio-button>
                      <el-radio-button label="保留趋势存储时长" size="mini" ></el-radio-button>
                    </el-radio-group>
                    <template v-if="boolTrend">
                      <el-input v-model="triggerForm.trends"  style="width: 100px;float:left;margin-left: 2px"></el-input>
                    </template>
                  </el-form-item>
                  <el-form-item label="描述" >
                    <el-input  type="textarea" :rows="3" placeholder="请输入内容" v-model="triggerForm.description"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit('triggerForm')">立即创建</el-button>
                    <el-button @click="goOff">返回</el-button>
                  </el-form-item>
                </el-form>
                <!-- 列出key-description列表 -->
                <div class="add-form">
                  <el-dialog title="标准检测器" :visible.sync="dialogFormVisible">
                    <el-table @cell-click="handleCell" :data="tableData" style="width: 100%">
                      <el-table-column prop="title" label="键值" width="400">
                        <template slot-scope="tableData">
                          <a :href="tableData.row.url" target="_blank" class="buutonText">{{tableData.row.key_}}</a>
                        </template>
                      </el-table-column>
                      <el-table-column prop="number" label="状态" align="center" width="100">
                        <template slot-scope="tableData">
                          <el-tag v-if="tableData.row.number!=0" type="success">已配置</el-tag>
                          <el-tag v-else type="info">未配置</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column prop="describe" label="描述"></el-table-column>
                    </el-table>
                  </el-dialog>
                </div>
              </div>

              <template v-if="deleteButtonView">
                <div class="itemInfo-footer" >
                  <span>已选择&nbsp;{{selectedItemIds.length}}</span>&nbsp;&nbsp;
                  <el-button type="danger" size="small" :disabled="selectedItemIds.length===0" @click="open">批量删除</el-button>
                  <el-button type="primary" size="small" icon="el-icon-d-arrow-left" @click="comeHomePage">返回</el-button>
                </div>
              </template>
            </div>
          </el-main>
          <vFootSpace/>
        </el-container>
      </el-container>
    </el-container>
</template>

<script>
import axios from 'axios'
import { MessageBox } from 'element-ui';
export default {

  name: "ItemInfo",
  data() {
    return {
      options: [{
        value: 0,
        label: '数字（无正负）'
      }, {
        value: 1,
        label: '浮点数'
      }, {
        value: 2,
        label: '字符'
      }, {
        value: 3,
        label: '日志'
      }, {
        value: 4,
        label: '文本'
      }],
      radio: '1',
      screenWidth: document.body.clientWidth*0.85,
      screenHeight: document.body.clientHeight*0.625,
      interface_:"",
      snmpShowBool:true,
      type:"",
      showItemTableBool:true,  //判断显示表格还是添加监控项表单标志
      radioTrend:"保留趋势存储时长",
      boolTrend:true,
      radioHistory:"保留历史时长",
      boolHistory:true,
      dialogFormVisible:false, //显示可以值列表
      hostid: "",
      host: "",
      selectedItemIds: [], //所选的itemid,键为页码，值为该页选择的id数组
      selectedItemNames: [], //所选的names
      itemList: [],
      hostSate: {}, //主机状态
      currentPage: 1, // 当前页码
      pageSize: 20, // 每页显示的记录数
      total: 0, // 总记录数
      hostInfos: [],  //所有的主机名和主机id
      delayUnit : "m",
      triggerForm:{
        hostid:"",
        delay:"1",
        interfaceid:"",
        type:"",
        key_:"",
        history:"90d",
        trends:"365d",
        description:" ",
        value_type: 0,
      },//trigger创建表单
      tableData:[],
      examples: [],
      params: {},
      deleteButtonView:true,
      itemForm:{},
      cur_type: '',
      cur_inventory: [],
      rules: { // 校验规则
        name: [{ required: true, message: '名称为必填项', trigger: 'blur' },
               {pattern: /^(?![a-zA-Z]*$)[a-zA-Z\u4E00-\u9FA5]{1}[a-zA-Z0-9\u4E00-\u9FA5]{0,19}$/,
                message: '以非数字开头的少于20位字母和数字的组合（支持汉字）', trigger: 'blur'}],
        key_: [{ required: true, message: '键值为必填项', trigger: 'blur' },
               {pattern: /^[^\s]*$/,
                message: '键值为必填项，不能输入空格', trigger: 'blur'}],
        delay: [{ required: true, message: '更新间隔为必填项', trigger: 'blur' },
                {pattern: /^[0-9]*$/,
                message: '不可键入非法字符！', trigger: 'blur'}],
        snmp_oid:[{required: true, message: '必填项', trigger: 'blur' }],
        value_type:[{required: true, message: '必填项', trigger: 'blur' }],
      },
      commonTriggerMap: {}
    }
  },
  computed: {
    ifStart: function (){//计算主机状态class
      const status = this.hostSate.status
      if(status === '0')//启用
        return 'hostStart'
      else           //关闭
        return 'hostStop'
    },
    statusValue: function (){//计算主机状态内容
      const status = this.hostSate.status
      if(status === '0')//启用
        return '被监控的设备'
      else           //关闭
        return '未被监控的设备'
    },
    //计算当前页数据
    currentPageItems: function (){
      let start = (this.currentPage-1)*this.pageSize
      let end = start + this.pageSize
      if(end >= this.itemList.length)
        end = this.itemList.length
      //截取字符串
      return this.itemList.slice(start, end);
    }
  },
  mounted() {
    this.hostid = this.$route.query.hostid
    this.host = this.$route.query.host
    this.hostname = this.$route.query.hostname
    this.cur_type = this.$route.query.cur_type
    this.flag = this.$route.query.flag   //判断是否是日志跳转过来的请求
    this.findAllHost()
    // //判断主机名是否为空
    // if(this.host === undefined) {
    //   if(sessionStorage.getItem('hostid') === null){
    //     sessionStorage.setItem('hostid', '')
    //     sessionStorage.setItem('host', '')
    //   }
    //   this.hostid = sessionStorage.getItem('hostid')
    //   this.host = sessionStorage.getItem('host')
    // }
    // 判断日志跳转
    if(this.host !== null && this.host.length > 0){
      if (this.flag=="true"){

        this.deleteButtonView = false

        this.triggerForm.value_type = 3
        axios.get('/host/checkHostSystemType.action?hostid='+this.hostid).then(
                ((res) =>{
                  // console.log(res.data)
                  if (res.status == 200){
                    if (res.data.content.systemType == 1){
                      this.triggerForm.key_ = 'log[/var/log/zabbix/zabbix_agentd.log]'
                    }else if (res.data.content.systemType == 0){
                      this.triggerForm.key_ = 'eventlog[System,,Warning|Error]'
                    }
                  }
                })
        )

        this.radioHistory = "保留历史时长"
        this.isShowHistory(this.radioHistory)
        this.showItemTable()
      }
        //请求主机状态属性
        this.getHostState()
        //查询所有监控项
        this.findAllItems()
    }
  },
  // beforeDestroy() {
  //   //把主机信息存在起来
  //   let host = sessionStorage.getItem('host')
  //   if(this.host !== undefined){
  //     sessionStorage.setItem('host',this.host)
  //     sessionStorage.setItem('hostid', this.hostid)
  //   }
  // },
  methods: {
    //重置表单
    restForm() {
      this.delayUnit = "m"
      this.triggerForm = {
        hostid: "",
        delay: "1",
        interfaceid: this.triggerForm.interfaceid,
        type: this.triggerForm.type,
        key_: "",
        history: "90d",
        trends: "365d",
        description:"",
        value_type: this.triggerForm.value_type,
      }
    },
    //返回上一页
    goOff(){
      this.showItemTableBool = true
      this.deleteButtonView = true
    },
    comeHomePage() {
      this.$router.push({path: '/hostSetting'})
    },

    //判断显示表格还是添加监控项表方法
    showItemTable(){
      this.deleteButtonView = false
      if (this.cur_type === "1"){
        this.type = '服务器'
        this.triggerForm.type= "0"
        this.snmpShowBool = false
      }else if(this.cur_type === "2"){
        this.type = '交换机'
        this.triggerForm.type= "1"
        this.snmpShowBool = true
      }else if(this.cur_type === "3"){
        this.type = '防火墙'
        // 后面的这个trigger.type逻辑记得补上防火墙和单向网闸的
        this.triggerForm.type= "2"
        this.snmpShowBool = false
      }else {
        this.type = '单向网闸'
        // 后面的这个trigger.type逻辑记得补上防火墙和单向网闸的
        this.triggerForm.type= "3"
        this.snmpShowBool = false
      }
      this.showItemTableBool = false
      this.getInterface()
    },
    //弹出键值列表
    selectKey(){
      this.findAllKey()
      this.dialogFormVisible = true
    },
    //获取interface接口
    getInterface(){
      axios.get('/host/getHostTempGrou.action?hostId='+this.hostid+'&host='+this.host).then((res) => {
        let ip=res.data.content.interfaces.result[0].ip
        let port=res.data.content.interfaces.result[0].port
        this.interface_ = ip +":"+port
        this.triggerForm.interfaceid = res.data.content.interfaces.result[0].interfaceid
      })
    },
    isShowTrend(evt){
      if (evt==="保留趋势存储时长"){
        this.boolTrend = true
        this.triggerForm.trends = "365d"
      }else {
        this.boolTrend = false
        this.triggerForm.trends = "0d"
      }
    },
    isShowHistory(evt){
      if (evt==="保留历史时长"){
        this.boolHistory = true
        this.triggerForm.history = "90d"
      }else {
        this.boolHistory = false
        this.triggerForm.history = "0d"
      }
    },
    //查询所有键值与描述
    findAllKey(){
      axios.get('/updateMonitor/getItemKeyFromXML.action?hostId='+this.hostid+'&type='+this.cur_type).then((res) => {
        if (this.hostSate.available!=="0"){
          this.tableData=res.data.content.itemKeyMap.agent
        }else {
          this.tableData=res.data.content.itemKeyMap.SNMP_trap
          //this.tableData.splice(this.tableData.length,0,res.data.content.itemKeyMap.agent)
        }
        this.commonTriggerMap = res.data.content.triggerNum
        console.log(this.commonTriggerMap)
          let keyName = ''
          for(let item of this.tableData){
            item.number = 0
            keyName  = item.key_.split('[')[0]
            for(let key in this.commonTriggerMap){
              if(keyName == key){
                item.number = this.commonTriggerMap[key]
                break;
              }
            }
          }
          console.log(this.tableData)
      })
    },
    //提交创建form表单
    onSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.triggerForm.delay = this.triggerForm.delay + this.delayUnit
          this.triggerForm.hostid = this.hostid
          // 表单校验通过，发生ajax请求，将录入的数据提交到后台进行处理
          axios.post('/updateMonitor/creatMonitorItem.action', this.triggerForm).then((res) => {
            // 关闭新增窗口
            if (res.data.status) { // 执行成功
              // 弹出提示
              // 弹出提示信息
              this.$message({
                message: res.data.content.createFlag,
                type: 'success'
              })
              let type = this.triggerForm.type === '0'? "客户端":"SNMPv1代理"
              let itemid = res.data.content.itemid
              let status = '已启用'
              let key_ = this.triggerForm.key_
              let name = this.triggerForm.name
              let delay = this.triggerForm.delay
              let history = this.triggerForm.history
              let trends =this.triggerForm.trends
              this.itemList.splice(this.itemList.length, 0, {type : type,
                key_:key_, name:name, status:status,delay: delay,history: history,trends:trends,itemid:itemid
              })
              this.restForm()
            } else { // 执行失败
              // 新增成功后
              this.triggerForm.delay = this.triggerForm.delay.replace('s','')
              this.triggerForm.delay = this.triggerForm.delay.replace('m','')
              this.triggerForm.delay = this.triggerForm.delay.replace('h','')
              this.triggerForm.key_ = ""
              this.$message.error(res.data.content.createFlag)
            }
          })
        } else {
          return false
        }
      });
    },
    //点击表单回显数据到输入框
    handleCell(evt){
      this.dialogFormVisible=false
      this.triggerForm.key_ = evt.key_
      this.examples = evt.examples
      this.params = evt.params
      let tk = $('#triggerKey')
      tk.focus()
      tk.blur()
    },
    getHostState() {
      // if (typeof (this.hostname)!='undefined'){
      //   this.host = this.hostname
      // }
      axios.get('/host/getHostStatus.action?host=' + this.host).then((res) => {
        if (res.data.status) { // 执行成功
          this.hostSate = res.data.content
        }
      })
    },
    enableItem(itemid,name) {//启用所选监控项
      axios.post('/updateMonitor/enableMonitorItem.action?itemid='+itemid+'&name='+name).then((res) => {
        if (res.data.status) { // 执行成功
          //将列表中的内容改成未启用
          let item = this.itemList[0]
          let i = 0
          for (; i < this.itemList.length; i++){
            if(itemid === this.itemList[i].itemid){
              item = this.itemList[i]
              item.status = '已启用'
              break
            }
          }
          this.itemList.splice(i, 1, item)
          this.$message({
            message: '监控项目已启用',
            type: 'success'
          })
        }else{
          this.$message.error('操作失败')
        }
      })
    },
    disableItem(itemid,name){//禁用所选监控项
      axios.get('/updateMonitor/stopMonitorItem.action?itemid='+itemid+'&name='+name).then((res) => {
        if (res.data.status) { // 执行成功
          //将列表中的内容改为已启用
          let item = this.itemList[0]
          let i = 0
          for (; i < this.itemList.length; i++){
            if(itemid === this.itemList[i].itemid){
              item = this.itemList[i]
              item.status = '未启用'
              break
            }
          }
          this.itemList.splice(i, 1, item)
          this.$message({
            message: '监控项目被禁用',
            type: 'success'
          })
        }else{
          this.$message.error('操作失败')
        }
      })
    },
    deleteItem(){//删除所选监控项
      let itemids = {'itemids': this.selectedItemIds, 'itemnames': this.selectedItemNames}
      axios.post('/updateMonitor/deleteMonitorItem.action' ,itemids).then((res) => {
        if (res.data.status) { // 执行成功
          this.findAllItems()
          this.selectedItemIds = []
          this.$nextTick(()=>{
            this.$refs.table.clearSelection()
          })
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }else{
          this.$message.error('操作失败，内置监控不允许删除！')
        }
      })
    },
    findAllItems(){//查询所有监控项
      axios.post('/updateMonitor/queryMonitorItemByHostid.action?hostid='+this.hostid).then((res)=>{
        this.itemList = res.data.content.itemNews
        this.total = res.data.content.total;
      })
    },
    findAllHost() {//查询所有主机名和id
      axios.post('/host/findAllHost.action').then((res)=>{
        this.hostInfos = res.data.content.hosts
      })
      this.chooseHost = true
    },
    handleSelectionChange(val) {
      const select = []
      const selectname = []
      for(let i = 0; i < val.length; i++){
        select[i] = val[i].itemid
        selectname[i] = val[i].name
      }
      this.selectedItemIds = select
      this.selectedItemNames = selectname
    },
    handleCurrentChange(currentPage){
      //换页
      // 设置最新的页码
      this.currentPage = currentPage
    },
    // getToolTip: function (type){//计算提示
    //   let state = ''
    //   switch (type){
    //     case 1://zbx可用性
    //       state = this.hostSate.available
    //       break;
    //     case 2://snmp可用性
    //       state = this.hostSate.snmp_available
    //       break;
    //     case 3://jmx可用性
    //       state = this.hostSate.jmx_available
    //       break;
    //     case 4://impi可用性
    //       state = this.hostSate.ipmi_available
    //       break;
    //   }
    //   if(state === '1') return '可用'
    //   else if(state === '2') return '不可用'
    //   else  return '可用性未知'
    // },
    ifAvailable: function (type){//计算主机可用性class
      if(type === this.cur_type) {
        return 'hostAvailable'
      }else {
        return 'hostDefault'
      }
    },
    filterHandler (value, row){
      return row.status === value;
    },
    open() {
      this.$confirm('确定删除所选监控项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteItem()
      }).catch(() => {
      });
    },
    handleSelectHost(item) {
      for(let i=0; i < this.hostInfos.length; i++){
        if(item === this.hostInfos[i].hostid){
          this.host = this.hostInfos[i].host;
          break;
        }
      }
      //请求主机状态属性
      this.getHostState()
      //查询所有监控项
      this.findAllItems()
      this.getCurType(item)
    },
    getCurType(item) {
      axios.get('/host/findInventory.action?host=' + item).then((res) => {
          this.cur_inventory = res.data.content.Inventory
          // console.log(this.cur_inventory)
          // console.log(this.hostSate)
          this.cur_type = this.isType(this.cur_inventory,this.hostSate.available)
          // console.log('````' + this.cur_type);
      })
    },
    ifAgentAvail(inv, avail) {
      if (avail === '1') {
          return 'hostAvailable'
      }else if(avail === '2'){
          return 'hostAvailable'
      }else{
          return 'hostDefault'
      }
    },
    ifSwitchAvail(inv, avail) {
      if ((avail !== '1') && (avail !== '2') && ((inv.notes === undefined) || (inv.notes === 'switch'))) {
          return 'hostAvailable'
      }else{
          return 'hostDefault'
      }
    },
    ifFirewallAvail(inv, avail) {
      if (inv.notes === 'firewall') {
          return 'hostAvailable'
      }else{
          return "hostDefault"
      }
    },
    ifSinglegateAvail(inv, avail) {
      if (inv.notes === 'single_gate') {
          return 'hostAvailable'
      }else{
          return "hostDefault"
      }
    },
      // 判断设备类型
    isType(inv, avail) {
      if(this.ifAgentAvail(inv, avail) == 'hostAvailable') {
          return '1'
      }else if (this.ifSwitchAvail(inv, avail) == 'hostAvailable') {
          return '2'
      }else if (this.ifFirewallAvail(inv, avail) == 'hostAvailable') {
          return '3'
      }else if (this.ifSinglegateAvail(inv, avail) == 'hostAvailable'){
          return '4'
      }else {
          return '0'
      }
    }
  }
}
</script>

<style scoped>
  .content{
    width: 100%;
    height: 97%;
    overflow-x:hidden
  }
  .itemInfo_main{
    padding: 10px;
    height: 92vh;
    width: 100%;
    margin-top: 60px;
  }
  .buutonText{
    color: #2ac06d;
    cursor:pointer;
  }
.itemInfo-header{
  height: 56px;
  line-height: 56px;
  vertical-align: center;
}
.itemInfo-header p{
  float: left;
  font-size: 30px;
}
.itemInfo-header button{
  margin-top: 8px;
  float: right;
}
.itemInfo-middle{
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  margin-left: -140px;
  float: left;
}
.itemInfo-middle-host{
  text-decoration: none;
  color: #00a4ff;
}
.itemInfo-middle-host:hover{
  cursor: pointer;
}
.itemInfo-middle-host :hover{
  text-decoration: underline;
}
.itemInfo-middle-type{
  display: inline;
  margin-left: 20px;
  line-height: 50px;
}
.itemInfo-middle-type div{
  display: inline;
  padding-left: 5px;
  padding-right: 5px;
  height: 30px;
  line-height: 50px;
  color: #d9d9d9;
  border-top: 1px solid #d9d9d9;
  border-left: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}

.itemInfo-middle-type-last{
  border-right: 1px solid #d9d9d9;
}
/*.itemInfo-middle-type div:hover{*/
/*  cursor: pointer;*/
/*}*/
/*.itemInfo-middle-type div:hover:before{*/
/*  content:attr(data-tooltip);*/
/*}*/
/*span:hover:after{*/
/*  content:" ";*/
/*}*/
.itemInfo-content-table{
  width: 100%;
  /*height: 80%;*/
  margin: auto;
  text-align: center;
}
.itemInfo-footer{
  /*position: absolute;*/
  /*bottom: 30px;*/
  /*margin-bottom: 10px;*/
  /*margin-top: 20px;*/
  float: left
}
/*主机状态*/
.hostStart{
  /*启用*/
  color: #00dd00;
}
.hostStop{
  /*关闭*/
  color: red;
}
/*主机可用性*/
.hostAvailable{
  /*可用*/
  background: green;
}
.hostNotAvailable{
  /*不可用*/
  background: green;
}
.hostDefault{
  /* 未知*/
  background: white;
}
</style>
